<template>
	<view>

		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="base" title="加入购物车" @confirm="dialogConfirm"
					@close="dialogClose">
					<view>
						<view style="padding: 3rpx;">商品名称：{{ detail.title }}</view>
						<view style="padding: 3rpx;">商品图片:<image :src="detail.image"
								style="width: 150px;height: 150px;  vertical-align: middle;"></image>
						</view>

						<view style="padding: 3rpx;">商品编码：{{ detail.code }}</view>
						<view style="padding: 3rpx;">商品类型：{{ detail.type }}</view>
						<view style="padding: 3rpx;">货架区域：{{ detail.shelves }}</view>
						<view style="padding: 3rpx;display: flex;align-items: center;">数量：
							<uni-number-box :min="1" v-model="detail.stock" @change="change"  />
						</view>
						<view style="padding: 3rpx;">价格:<text style="color: red;font-size: 46rpx;">￥{{ price
						}}</text></view>
					</view>
				</uni-popup-dialog>
			</uni-popup>

		</view>


		<view class="form re">
			<view class="username">
				<text>如图所示条码为:060107153320</text>
			</view>
			<view class="code">
				<input placeholder="请输入商品数字条码" v-model="barcode" placeholder-style="color: #8f8f8f;"
					@input="checkBarcode" />
			</view>

			<view class="btn" @click="confirm">确定</view>
		</view>

	</view>
</template>

<script>
import { isEmptyObj } from '../../utils';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			barcode: '',
			// 详情
			detail: {
				title: '',
				id: '',
				image: '',
				price: 0,
				code: '',
				stock: 1,
				type: '',
				shelves: ''
			},
			price: 0,
			goodsList: []
		}
	},
	computed: {
		// ...mapState('shop', ['shop']),
		...mapState('cart', ['mycart']),
		...mapState('user', ['token', 'openid', 'userinfo']),
	},
	methods: {
		...mapMutations('cart', ['setCart', 'clearCart']),
		checkBarcode(event) {
			let v = event.target.value;
			setTimeout(() => {
				this.barcode = v.replace(/[^0-9]/g, '') // 只允许输入数字
			}, 3)
		},
		confirm() {
			if (!this.token) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return this.$api.msg('请先登录');
			}
			if (!this.barcode) {
				return this.$api.msg('请输入条码');
			}
			const that = this;
			this.$ajax.get('commodity/getByPage?code=' + this.barcode).then(data => {
				if (data.result.total > 0) {
					// 跳转到商品详情页
					console.log(data.result.records);
					const { title, id, image, money2, code, type, shelves } = data.result.records[0];

					that.detail.title = title;
					that.detail.image = image;
					that.price = money2;
					that.detail.price = money2;
					that.detail.code = code;
					that.detail.type = type
					that.detail.shelves = shelves
					that.detail.id = id;
					// 弹窗显示商品详情
					that.$refs.inputDialog.open();
				} else {
					return that.$toast('没有找到该商品');
				}
			})

		},

		dialogClose() {
			console.log('点击关闭')
		},
		dialogConfirm() {
			console.log('点击确认')
			const params = {
				tablename: this.detail.title,
				goodid: this.detail.id,
				goodname: this.detail.title,
				picture: this.detail.image,
				buynumber: this.detail.stock,
				userid: this.userinfo.id,
				price: this.detail.price,
				discountprice: 0,
			};
			// console.log(params);
			// 先去判断数据库是否有这个商品，有则修改数量，没有则添加
			const obj = {
				userid: this.userinfo.id,
				goodid: this.detail.id,
			}
			console.log(obj);
			// 查询购物车是否有该商品，根据goodid
			this.$ajax.get('cart/queryListByGoodId', obj).then(res => {
				console.log(res);
				if (res.success) {
					console.log(res.result.length);
					if (res.result.length > 0) {
						this.$toast('商品已存在购物车,请点击购物车查看!');
						this.detail.stock = 1; //重置数量
						return;
					}
					this.$ajax.get('cart/save', params).then(res => {
						console.log(res);
						if (res.success) {
							this.$refs.inputDialog.close();
							console.log("添加到购物车成功")
							this.$toast(res.message)
							this.detail.stock = 1; //重置数量
							// return uni.switchTab({
							// 	url: '/pages/cart/cart'
							// })
						}
					}).catch(err => {
						this.$toast(err.message)
						this.$refs.inputDialog.close();
						this.detail.stock = 1; //重置数量
					})
				}
			})
		},

		change(value) {
			console.log(value);
			this.detail.stock = value;
			const handleDecimalPrecision = (value, fixedNum = 2, multiple = 1) => {
				return parseFloat((value * multiple).toFixed(fixedNum))
			}
			this.price = handleDecimalPrecision(value, 2, this.detail.price);
		},
	}
}
</script>

<style lang="scss">
page {
	background: #FFFFFF;
	height: 100%;
}

.icon {
	color: #ffffff;
}

.logo {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	.img {
		width: 400rpx;
		margin: 50rpx 0;

		image {
			width: 100%;
			height: 100%;
			//border-radius: 100%;
			//border: 1px solid #557FE4;
		}
	}
}

.form {
	width: 100%;
	padding: 0 7%;
	font-size: 30upx;

	.username {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 0 45upx;
		box-sizing: border-box;
		margin-bottom: 26upx;
	}

	.code {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50upx;
		background-color: #FFFFFF;
		border: 1px solid #E4E4E4;
		padding: 0 45upx;
		box-sizing: border-box;
		margin-bottom: 26upx;

		input {
			width: 100%;
			height: 50upx;
			color: #000000;
			font-weight: bold;
			font-size: 26rpx;
		}
	}

	.btn {
		color: #FFFFFF;
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 45upx;
		background-color: #557FE4;
		font-size: 36upx;
	}
}

.re {
	.username {
		position: relative;

		.get-code {
			position: absolute;
			height: 90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 0;
			padding: 0 40upx;
			z-index: 3;

			&:after {
				content: " ";
				width: 1upx;
				height: 50upx;
				background-color: #fff;
				position: absolute;
				z-index: 3;
				margin-right: 100%;
				left: 0;
				top: 20upx;
			}
		}
	}

	.res {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100upx;
		color: #999999;
	}
}
</style>
